<template>
<div class="tree-list">
  <div class="tree-head bg-primary text-white text-weight-regular">
    <q-icon :name="headIcon" color="white" class="q-mr-sm" />
    <span class="head-title vertical-middle user-select-none">{{headName}}</span>
    <div class="fr font-size-16">
      <q-icon v-if="editUrl.length>0 && !isHuawei" name="iconfont icontubiao-12" color="white" v-go-back="editUrl">
        <q-tooltip>编辑</q-tooltip>
      </q-icon>
      <q-icon @click="toggleOpen" v-if="showFold" name="iconfont icontubiao-37" :class="{fold:!open}"
              color="white" class="margin-l-10 margin-r-10 toggle-icon">
        <q-tooltip>{{open?'收起':'展开'}}</q-tooltip>
      </q-icon>
      <q-icon @click="refresh" v-if="showRefresh" name="iconfont icontubiao-34" color="white">
        <q-tooltip>刷新</q-tooltip>
      </q-icon>
    </div>
  </div>
  <div class="tree-content overflow-auto scrollbar">
<!--    <q-scroll-area-->
<!--      :thumb-style="thumbStyle"-->
<!--      style="height: 100%"-->
<!--      class="tree-content bg-white"-->
<!--    >-->
    <div class="child-scroll">
      <tree-item v-for="(item, index) in treeList" :key="index" :item="item" :activeId="activeId" :ellipsis="false" :isDisable="isDisable" :isOrganize="isOrganize"/>
    </div>
<!--    </q-scroll-area>-->
  </div>
</div>
</template>

<script>
import TreeItem from 'src/components/tree-list/item'
import { gethashcode } from 'src/assets/js/util'
import { mapGetters } from 'vuex'
export default {
  name: 'tree-list',
  props: {
    // 标题
    headName: {
      type: String
    },
    // 标题图标
    headIcon: {
      type: String
    },
    isOrganize: {
      type: Boolean,
      default: false
    },
    editUrl: {
      type: String,
      default: ''
    },
    // 列表数据
    list: {
      type: Array
    },
    // 是否显示刷新按钮
    showRefresh: {
      type: Boolean,
      default: true
    },
    // 是否显示折叠按钮
    showFold: {
      type: Boolean,
      default: true
    },
    isAll: {
      type: Boolean,
      default: false
    },
    isDisable: {
      type: Boolean,
      default: false
    },
    isDisOpen: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ]),
    isHuawei () {
      return this.userInfo.channel === 'hw' && this.userInfo.client_id === 'huawei_iot_stage_app'
    }
  },
  data () {
    return {
      // 使用到的数据
      treeList: [],
      // 选中的idHash
      activeId: null,
      // 整体的展开状态
      open: this.isDisOpen,
      thumbStyle: this.CommonConfig.thumbStyle // 滚动条样式
    }
  },
  created () {
  },
  mounted () {
    // 监听change-activeid，设置activeId
    this.CommonConfig.event.$on('change-activeid', (id, item) => {
      this.activeId = id
      this.$emit('setAct', item)
    })
  },
  methods: {
    // 给list添加数据
    initTree (info, open = false) {
      return info.map(item => {
        if (item.children && item.children.length > 0) {
          item.children = this.initTree(item.children, this.open)
        }
        return {
          ...item,
          open: item.label === 'default' || item['open'] ? true : open,
          idHash: gethashcode()
        }
      })
    },
    setTree (list) {
      this.treeList = this.initTree(list, this.open)
      this.isAll && (this.activeId = this.treeList[0].idHash)
    },
    // 去编辑列表树
    goEdit () {
      this.$router.push(this.editUrl)
    },
    // 刷新
    refresh () {
      this.$emit('getTree')
    },
    // 整体展开收起
    toggleOpen () {
      this.open = !this.open
      this.treeList = this.initTree(this.list, this.open)
    },
    clearAct () {
      this.activeId = null
    }
  },
  components: {
    TreeItem
  },
  watch: {
    list: function (newVal) {
      this.setTree(newVal)
    }
  }
}
</script>

<style scoped lang="stylus">
  .tree-list {
    display flex
    flex-direction column
    width 100%
    min-width 250px
    border-radius 6px
    overflow hidden
    height 100%
    background-color #ffffff
    .tree-head {
      flex 40px 0
      padding 0 20px
      line-height 40px
      .head-title{
        font-weight bold
        line-height 40px
      }
    }

    .tree-content {
      flex 1
      min-height calc(100% - 40px)
      padding-bottom 20px
      .child-scroll{
        min-width: 100%; display: inline-block;
      }
    }

    .toggle-icon {
        transition transform 300ms ease-in
      &.fold {
        transform rotate(-90deg)
      }
    }
  }
</style>
